<template>
  <h1 class="title">{{ title }}</h1>
  <p class="description" v-html="description"></p>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: 'title',
  },
  description: {
    type: String,
    default: '',
    required: false
  },
})


</script>

<style scoped>
.title {
  text-align: left;
  font-size: 1.5rem;
}

h1::first-letter {
  text-transform: capitalize;
  font-size: 2rem;
  color: chocolate;
}

.description {
  background-color: rgba(167, 94, 234, 0.05);
}
</style>
